## Support

All components were tested using the most popular email clients.

<div
  role="list"
  className="grid py-2 list-none border rounded-xl text-sm"
  style={{
    gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
    columnGap: '0.5rem',
    borderColor: 'rgb(30 41 59/1)'
  }}
>
  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img
      src="https://react.email/static/icons/gmail.svg"
      width="56px"
      height="56px"
      alt="Gmail"
      className="mx-auto mb-1"
    />
    Gmail
  </div>
  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img
      src="https://react.email/static/icons/apple-mail.svg"
      width="56px"
      height="56px"
      alt="Apple Mail"
      className="mx-auto mb-1"
    />
    Apple Mail
  </div>
  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img
      src="https://react.email/static/icons/outlook.svg"
      width="56px"
      height="56px"
      alt="Outlook"
      className="mx-auto mb-1"
    />
    Outlook
  </div>
  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img
      src="https://react.email/static/icons/yahoo-mail.svg"
      width="56px"
      height="56px"
      alt="Yahoo! Mail"
      className="mx-auto mb-1"
    />
    Yahoo! Mail
  </div>
  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img
      src="https://react.email/static/icons/hey.svg"
      width="56px"
      height="56px"
      alt="HEY"
      className="mx-auto mb-1"
    />
    HEY
  </div>
  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img
      src="https://react.email/static/icons/superhuman.svg"
      width="56px"
      height="56px"
      alt="Superhuman"
      className="mx-auto mb-1"
    />
    Superhuman
  </div>
</div>
